<style src="@/css/add-paper.css"></style>
<style>
.add-paper-wrapper {
    width: 1000px;
    background-color: #F7F7F7;
}
.plan-item {
    margin-bottom: 20px;
    background-color: #FFF;

    & h2 {
        padding-left: 25px;
        color: #3A3A63;
        font-size: 16px;
        line-height: 60px;
        border-bottom: 1px solid #E1E7EB;
    }
}
.plan-item-content {
    padding: 30px 60px;
}
.plan-item-content.setting .el-input, .plan-item-content.setting .el-textarea {
    width: 400px;
}

.paper-content-select {
    margin: 0 90px;
    position: relative;
}
.add-subject-btn, .add-options-btn {
    width: 100%;
    position: absolute;
    color: #7485B1;
    font-size: 14px;
    text-align: center;
    border: 1px dashed #E1E7EB;
    line-height: 36px;
    pointer-events: none;

    &::before {
        content: "+";
        margin-right: 10px;
        font-size: 18px;
    }
}

.add-options-btn {
    margin-top: 10px;
    position: static;
    pointer-events: auto;
    cursor: pointer;
}


.single-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    color: #7485B1;
    font-size: 14px;

    & .el-input {
        display: inline-block;
        width: 300px;
        margin-left: 20px;
    }

    & .score-input {
        width: 40px;
        margin-right: 10px;

        & input {
            padding: 0;
            font-size: 14px;
            text-align: center;
        }
    }
}
.single-th {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 144px;
    left: 336px;
    color: #909399;
    box-sizing: border-box;
    border-bottom: 1px solid #ebeef5;
    background-color: #F4F7FD;
}
.single-input {
    width: 240px;
    height: 32px;
    padding-left: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #c0c4cc;
}
.single-input:focus {
    outline: none;
}
.single-input::placeholder {
    color: #C1C6D4;
}
.single-icon-wrapper {
    display: flex;
    justify-content: space-between;

    & .icons {
        display: none;
    }
}
.single-icon-wrapper:hover .icons {
    display: block;
}

.paper-content {
    padding: 0;
    padding-bottom: 30px;
}
.paper-content ul {
    margin-bottom: 30px;
    counter-reset: c;
}
.paper-content-item {
    padding: 30px 90px;
    margin-bottom: 0;
    position: relative;
    color: #7485B1;
    font-size: 14px;

    & h3 {
        margin-bottom: 30px;

        &::before {
            counter-increment: c;
            content: counter(c) '、';
        }
    }

    & li {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
    }
}
.side-wrapper {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 60px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid #E1E7EB;

    & span {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    & span:last-child {
        border-top: 1px solid #E1E7EB;
    }
}

.paper-preview-wrapper {
    width: 1000px;
}
.summary {
    color: #7485B1;
    font-size: 14px;

    & li {
        margin-bottom: 30px;
    }

    & span {
        margin-left: 30px;
        color: #3A3A63;
    }
}


</style>

<template>
    <div class="paper-preview-wrapper add-paper-wrapper">
        <div class="plan-item">
            <h2>{{type === 0 ? '试卷' : '问卷'}}概要</h2>
            <div class="plan-item-content summary">
                <ul>
                    <li v-if="type === 0">
                        考试名称
                        <span v-text="name"></span>
                    </li>
                    <li v-else>
                        问卷名称
                        <span v-text="name"></span>
                    </li>

                    <li v-if="type === 0">
                        合格分数
                        <span v-text="score"></span>分
                    </li>

                    <li v-if="type === 0">
                        考试时长
                        <span v-text="time"></span>分钟
                    </li>
                    <li>
                        考试描述
                        <span v-text="desc"></span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="plan-item">
            <h2>{{type === 0 ? '试卷内容' : '问卷详情'}}</h2>
            <div class="plan-item-content paper-content">
                <ul>
                    <li class="paper-content-item" v-for="(item, index) of subject">
                        <template v-if="item.type === 0">
                            <h3>【单选题】{{item.name}}</h3>
                            <ol>
                                <li class="paper-radio" v-for="(item, index) of item.list">
                                    <input type="radio" disabled :checked="item.selected">
                                    <span :class="{actived: item.selected}"></span>
                                    {{item.name | format(index)}}
                                </li>
                            </ol>
                        </template>

                        <template v-if="item.type === 1">
                            <h3>【多选题】{{item.name}}</h3>
                            <ol>
                                <li v-for="(item, index) of item.list">
                                    <!-- <el-checkbox disabled :checked="item.selected"></el-checkbox> -->
                                    <!-- <input type="checkbox" disabled :checked="item.selected"> -->
                                    <span class="paper-checkbox" :class="{actived: item.selected}"></span>
                                    {{item.name | format(index)}}
                                </li>
                            </ol>
                        </template>

                        <template v-if="item.type === 2">
                            <h3>【问答题】{{item.name}}</h3>
                            <el-input type="textarea" resize="none" :rows="4" placeholder="请输入" disabled></el-input>
                        </template>
                    </li>
                </ul>
            </div>
        </div>

        <div class="plan-item" v-if="type === 0">
            <h2>试卷合计</h2>
            <div class="plan-item-content paper-total">
                <el-table :data="paperTotal" show-summary header-cell-class-name="plan-item-th" :header-cell-style="{backgroundColor: '#F4F7FD'}">
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column prop="num" label="题数"></el-table-column>
                    <el-table-column prop="score" label="分值"></el-table-column>
                </el-table>
            </div>
        </div>

        <el-button type="primary" @click="cancelPreview">取消预览</el-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                type: 0,
                name: '',
                score: '',
                classify: '',
                time: '',
                desc: '',
                ExamLibID:"",
                subject: []
            }
        },

        computed: {
            paperTotal() {
                const temp = []

                this.subject.forEach((item) => {
                    if (item.type === 0) {
                        const obj = temp.find((item) => item.name === '单选题')

                        if (obj) {
                            obj.num++
                            !!item.score && (obj.score += item.score)
                        } else {
                            temp.push({
                                name: '单选题',
                                score: item.score,
                                num: 1
                            })
                        }
                    }

                    if (item.type === 1) {
                        const obj = temp.find((item) => item.name === '多选题')

                        if (obj) {
                            obj.num++
                            !!item.score && (obj.score += item.score)
                        } else {
                            temp.push({
                                name: '多选题',
                                score: item.score,
                                num: 1
                            })
                        }
                    }

                    if (item.type === 2) {
                        const obj = temp.find((item) => item.name === '问答题')

                        if (obj) {
                            obj.num++
                        } else {
                            temp.push({
                                name: '问答题',
                                score: 0,
                                num: 1
                            })
                        }
                    }
                })

                return temp
            }
        },

        filters: {
            format(value, index) {
                const temp = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G']

                return `${temp[index]}、${value}`
            }
        },

        watch: {
            '$route': 'getData'
        },

        created() {
            this.getData()

            this.type = + this.$route.query.type

            this.ExamLibID = this.$route.query.ExamLibID
            if(this.type == 0) {
                this.getTestPaperInfoCateList()
                this.path = [
                        {
                            name:'效果评估',
                            path:'/effect/test-papers'
                        },
                        {
                            name:'试卷库',
                            path:"/effect/test-papers"
                        },
                        {
                            name:'试卷预览'
                        }
                    ]


            } else {
                this.path = [
                        {
                            name:'效果评估',
                            path:'/effect/test-papers'
                        },
                        {
                            name:'问卷库',
                            path:"/effect/survey"
                        },
                        {
                            name:'问卷预览'
                        }
                    ]
            }


            // 设置面包屑
            this.$store.commit('setPath', this.path)
        },

        beforeRouteLeave(to, from, next) {

            if (to.path !== '/effect/edit-paper') {
                // localStorage.removeItem('editpaperPreview')
            }

            next()
        },

        methods: {
            getData() {
                let temp = JSON.parse(localStorage.getItem('editpaperPreview') || localStorage.getItem('editwenPaperPreview'))

                if (! temp) {
                    return
                }

                this.name = temp.form.examName
                this.classify = temp.form.classify

                this.score = temp.formSetting.score
                this.time = temp.formSetting.time
                this.desc = temp.formSetting.desc

                this.subject = temp.subject
            },



            cancelPreview() {
                if( this.type == 0 ) {
                    this.$router.push({'path': '/effect/edit-paper', query:{'ExamLibID': this.ExamLibID}})
                } else {
                    this.$router.push({'path': '/effect/edit-qsn', query:{'ExamLibID': this.ExamLibID}})
                }
                // localStorage.removeItem('paperPreview')
            }
        }
    }
</script>
